<template>
	<view class="address">
		<view class="address-card">
			<template v-if="state">
			<uni-card v-if="data.length != 0" :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'40rpx'" :padding="0" :key="item.id" v-for="item in data" @click="address('address-up',item.id)">
				<view class="u-list">
					<view class="list-view">
					   <view>
					   	<text class="text">{{item.a_name || ''}}</text>
						<text class="text">{{item.tel || ''}}</text>
						<text class="text1">{{item.type == 1?'集合地址':'邮寄地址'}}</text>
					   </view>
					   <view class="list-text">
					   	<text class="text2">{{item.road || ''}}</text>
					   </view>
					</view>
					<image class="img" :src="imgUrl2" mode="aspectFit"></image>
				</view>
			</uni-card>
			</template>
			<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;" v-else>
				<image :src="imgUrl" style="width: 350rpx;height:291rpx;margin-bottom: 36rpx;"></image>
				<text style="font-size: 32rpx;font-weight: 500;color: #777777;margin-bottom: 120rpx;">暂无数据!</text>
			</view>	
		</view>
		<view class="address-but">
			<button class="but" plain @click="address('address-up')">添加地址</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:`${getApp().globalData.imgScr}jd/dizhikongzhuangtai.png`,
				imgUrl2:`${getApp().globalData.imgScr}jd/biaoji_1.png`,
				url:'/hotelAdmin/my/address', // 跳转二级页面的公共路径
				data:[], // 集合地址数据
				state:true,
			};
		},
		onShow() {
			let _this = this
			this.$http.post('/index/Hotelpersonal/hotel_address').
			then(function (res) {
				//这里只会在接口是成功状态返回
				_this.data = res
				_this.state = _this.data.length
			}).catch(function (e) {
				//这里只会在接口是失败状态返回，不需要去处理错误提示
				uni.showToast({
					title: e.errMsg,
					icon:"none"
				})
			});
		},
		methods:{
			address: function(path,i) {
				if(i != undefined) {
					uni.navigateTo({
						url: `${this.url}/${path}/${path}?id=${i}`,
					});
				} else {
					uni.navigateTo({
						url: `${this.url}/${path}/${path}`,
					});
				}
				
			}
		}
	}
</script>

<style lang="scss">
.address {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100vh;
	.address-card {
		flex: 1;
		overflow: auto;
		margin-bottom: 20rpx;
		.uni-card {
			border-radius: 20rpx;
		}
		.u-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 0;
			.list-view {
				display: flex;
				flex-direction: column;
				justify-content: center;
				flex: 1;
				.text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #000000;
					margin-right: 20rpx;
				}
				
				.text1 {
					font-size: 20rpx;
					font-weight: normal;
					color: #8dc9f1;
					line-height: 28rpx;
					border: 1rpx solid #8dc9f1;
					border-radius: 4rpx;
					padding: 0 6rpx;
				}
				.list-text {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20rpx;
					.text2 {
						flex: 1;
						font-size: 24rpx;
						font-weight: normal;
						color:rgba($color: #000000, $alpha: 0.4);
					}
				}
			}
			.img {
				width: 28rpx;
				height: 28rpx;
				border: 0;
				overflow: hidden;
				margin-left: 20rpx;
			}
		}
	}
	.address-but {
		width: 100%;
		height: 80rpx;
		margin-bottom: 40rpx;
		.but {
			color: #FFFFFF;
			background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
			border-radius: 40rpx;
			line-height: 80rpx;
			border: 0;
			margin: 0 20rpx;
		}
	}
}
</style>
